<template>
    <el-input v-model="coordinate.value" class="coordinate-input">
        <el-select v-model="coordinate.sign" size="mini" slot="append">
            <el-option
                v-for="item in ['N', 'S', 'E', 'W']"
                :key="item"
                :value="item">
            </el-option>
        </el-select>
    </el-input>
</template>

<script>
export default {
    name: 'CoordinatePicker',
    props: {
        coordinate: {
            type: Object,
            required: true,
            default: () => {
                return {
                    value: 0,
                    sign: 'N',
                }
            }
        }
    },
    model: {
        prop: 'coordinate',
        event: 'change',
    },
    watch: {
        coordinate: {
            handler(val) {
                this.$emit('change', val);
            },
            deep: true,
        }
    }
}
</script>

<style lang='scss' scoped>
.coordinate-input{
    width: 200px;
    ::v-deep.el-input-group__append {
        background-color: #fff;
        width: 20px;
    }
    &.coordinate-small {
        width: 150px !important;
    }
}
</style>